<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
</head>
<body>
省份:<label for="p"></label><select id="p">
    <option value="-1">请选择</option>
</select>
市/洲:<label for="c"></label><select id="c">
    <option value="-1">请选择</option>
</select>
区/县:<label for="x"></label><select id="x">
    <option value="-1">请选择</option>
</select>

<!--需求，利用多表连接，查询市所对应的省份信息-->
<button id="sel1">查询1</button>
<table id="result">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>province.name</td>
    </tr>

</table>
<!--需求，利用多表连接，查询县所对应的市并且省份信息-->
<button id="sel2">查询2</button>


</body>
<script>
    $("#sel1").click(function () {

        $.get(
            "/city11",
            function (data) {
                console.log(data);
                data.forEach(function (elem){
                    $("#result").append("<tr><td>"+elem.id+"</td><td>"+elem.name+"</td><td>"+elem.province.name+"</td></tr>")
                })
            })
    })



    // $(function () {
    //     $.get(
    //       "/provinces",
    //         function (data) {
    //         console.log(data);
    //         data.forEach(function (item){
    //           $("#p").append("<option value='"+item.id+"'>"+item.name+"</option>")
    //         })
    //       }
    //     );
    // });

    // $("#p").change(function () {
    //     var pid = $(this).val();
    //     $("#c").empty();
    //     $("#c").append("<option value='-1'>请选择</option>");
    //     if(pid>0){
    //         $.get(
    //             "/cities",
    //             "pid="+pid,
    //             function (data) {
    //                 data.forEach(function (item){
    //                     $("#c").append("<option value='"+item.id+"'>"+item.name+"</option>")
    //                 })
    //             })
    //     }
    // })

    // $("#c").change(function () {
    //     var cid = $(this).val();
    //     $("#x").empty();
    //     $("#x").append("<option value='-1'>请选择</option>");
    //     if(cid>0){
    //         $.get(
    //             "/areas",
    //             "cid="+cid,
    //             function (data) {//直接将后端返回的json字符串转换为js对象
    //                 data.forEach(function (item){
    //                     $("#x").append("<option value='"+item.id+"'>"+item.name+"</option>")
    //                 })
    //             })
    //     }
    // })


</script>
</html>